<template>
<div class="payMethod" v-loading="loading">
  <div class="payMethod-title">{{ $t('billing.payMethod') }}</div>
  <div class="payMethod-tip">{{ $t('billing.payMethodTip') }}</div>
<!--  <div class="payMethod-add" v-if="!billingData.card || !billingData.card.payment_source_id" @click="addPayment">{{ $t('billing.payMethodAdd') }}</div>-->
  <div class="payMethod-card" v-for="item in paymentList" :key="item.id">
    <div class="payMethod-card-content">
      <img :src="cardType[item.card ? item.card.brand : 'bank']" alt="">
      <div class="payMethod-card-info">
        <div class="card-number">{{item.card ? item.card.masked_number : item.bank_account.last4 }}</div>
        <div v-if="item.card">{{ $t('billing.expiry') }} {{ item.card ? item.card.expiry_month : ''}}/{{ item.card ? item.card.expiry_year : ''}}</div>
      </div>
    </div>
    <div class="payMethod-card-bank">
      <span class="status" v-if="item.id === billingData.customer.primary_payment_source_id">Primary</span>
      <div class="notice" v-if="item.status === 'pending_verification'">
        <div class="text"><i class="el-icon-warning"></i>Pending Verification</div>
        <div class="verify" @click="verifyAHC(item)">Verify</div>
      </div>
    </div>
    <el-dropdown trigger="click" @command="(e) => {handleCommand(e, item)}">
      <span class="more"><i class="el-icon-more"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="Edit">Edit</el-dropdown-item>
        <el-dropdown-item command="Delete">Delete</el-dropdown-item>
        <el-dropdown-item command="Primary">Set As Primary</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  <el-dropdown class="add-dropdown" trigger="click" @command="handleCommand">
    <div class="payMethod-add-new">
      <div class="text">+ ADD NEW</div>
      <div class="icon el-icon-arrow-down"></div>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="card">Add Credit Card</el-dropdown-item>
      <el-dropdown-item command="bank">Add Bank Account</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  <addCard :visible.sync="addCardVisible" :billingData="billingData" :payMethodItem="payMethodItem" dialogType="pay" :payType="type" @success="addCardSuccess"></addCard>
  <verifyAHC :visible.sync="visibleAHC" :ahcData="ahcData" @verifySuccess="getPaymentList"></verifyAHC>
</div>
</template>

<script>
import bank from '@/assets/cardType/bank.png'
import visa from '@/assets/cardType/visa.png'
import mastercard from '@/assets/cardType/mastercard.png'
// eslint-disable-next-line camelcase
import american_express from '@/assets/cardType/american_express.png'
import discover from '@/assets/cardType/discover.png'
import jcb from '@/assets/cardType/jcb.png'
// eslint-disable-next-line camelcase
import diners_club from '@/assets/cardType/diners_club.png'
import bancontact from '@/assets/cardType/bancontact.png'
import addCard from './addCardAndAddress'
import verifyAHC from '@/views/modules/mspbots/billing/addCardAndAddress/verifyAHC'
export default {
  name: 'payMethod',
  components: {
    addCard,
    verifyAHC
  },
  props: ['billingData'],
  data () {
    return {
      cardType: { visa, mastercard, american_express, discover, jcb, diners_club, bancontact, bank },
      loading: true,
      addCardVisible: false,
      visibleAHC: false,
      type: '',
      paymentList: [],
      ahcData: {},
      payMethodItem: {}
    }
  },
  watch: {
    billingData () {
      this.getPaymentList()
    }
  },
  methods: {
    addPayment () {
      this.addCardVisible = true
      this.loading = false
    },
    addCardSuccess () {
      this.loading = true
      this.$emit('refreshBilling')
    },
    handleCommand (command, item) {
      if (command === 'Edit') {
        this.type = item.card ? 'card' : 'bank'
        this.payMethodItem = item
        this.addPayment()
      }
      if (command === 'Delete') {
        this.$confirm('Are you sure you want to delete this card information? If you need to use this card again in the future, you will need to add it again.', 'Warning', {
          confirmButtonText: 'Delete',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(async () => {
          await this.deleteCard(item.id)
        }).catch(() => {})

      }
      if (command === 'Primary') {
        this.setPrimary(item)
      }
      if (command === 'card' || command === 'bank') {
        this.type = command
        this.payMethodItem = null
        this.addPayment()
      }
    },
    async deleteCard (id) {
      const { deletePaymentSource } = this.$interface.pay
      try {
        this.loading = true
        const { data } = await deletePaymentSource(id)
        if (data.code !== 0) {
          this.loading = false
          this.$message.error(data.msg)
        } else {
          this.$emit('refreshBilling')
        }
      } catch (e) {
        console.log(e)
      }
    },
    async setPrimary (item) {
      this.loading = true
      const { assignPaymentRole } = this.$interface.pay
      const { data } = await assignPaymentRole({sourceId: item.id, customerId: this.billingData.customer.id})
      if (data.code !== 0) {
        this.loading = false
        this.$message.error(data.msg)
      } else {
        this.$emit('refreshBilling')
      }
    },
    async getPaymentList () {
      this.loading = true
      const { paymentList } = this.$interface.pay
      const { data } = await paymentList()
      if (data.code !== 0) {
        this.$message.error(data.msg)
      } else {
        this.paymentList = data.data.list.map(item => {
          return item.payment_source
        })
      }
      this.loading = false
    },
    verifyAHC (item) {
      this.ahcData = item
      this.visibleAHC = true
    }
  }
}
</script>

<style scoped lang="scss">
.payMethod{
  margin-top: 16px;
  padding: 16px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DDE1E6;
  background: #FBFBFB;
  &-title{
    font-size: 16px;
    font-weight: bold;
    color: #262626;
    line-height: 24px;
  }
  &-tip{
    color: #8D8D8D;
    line-height: 14px;
    font-size: 12px;
  }
  &-add {
    margin-top: 23px;
    font-size: 14px;
    color: #262626;
    line-height: 16px;
    padding: 8px 28px;
    border-radius: 2px 2px 2px 2px;
    border: 1px dashed #C1C7CD;
    cursor: pointer;
  }
  &-add-new {
    display: flex;
    border: 1px solid #00000014;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    .text {
      flex: 1;
      color: #000000;
      font-size: 14px;
      font-weight: bold;
      line-height: 32px;
      background: #fff;
    }
    .icon {
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-left: 1px solid #00000014;
    }
  }
  &-card{
    margin-top: 16px;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #DDE1E6;
    padding: 8px;
    position: relative;
    .el-dropdown {
      position: absolute;
      top: 15px;
      right: 15px;
      .more {
        cursor: pointer;
      }
    }
    &-content {
      display: flex;
      align-items: center;
    }
    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
    &-info {
      color: #8D8D8D;
      line-height: 14px;
      font-size: 12px;
      .card-number {
        color: #262626;
        line-height: 16px;
        font-size: 14px;
      }
    }
    &-bank {
      padding-left: 32px;
      .status {
        margin-top: 8px;
        display: inline-block;
        width: 61px;
        line-height: 22px;
        text-align: center;
        background: #FFEDF5FF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #00000029;
        font-size: 12px;
        color: #0043CE;
        font-weight: bold;
      }
      .notice {
        border-radius: 2px;
        margin-top: 8px;
        padding: 0 8px;
        line-height: 22px;
        background: #FFF2E8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #FFD9BE;
        font-size: 12px;
        .text {
          color: #BA4E00;
          i {
            margin-right: 4px;
          }
        }
        .verify {
          color: #003E92;
          cursor: pointer;
        }
      }
    }
  }
}
.add-dropdown {
  display: block;
}
</style>
